<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <view class="header-content">
        <view class="header-left">
          <view class="back-btn" @click="goBack">
            <text class="icon">←</text>
          </view>
          <text class="header-title">我的奖励</text>
        </view>
        <view class="header-right">
          <view class="header-icon-btn" @click="viewNotifications">
            <text class="fas fa-gift"></text>
            <view class="reward-badge">3</view>
          </view>
          <view class="avatar-container">
            <image 
              class="user-avatar"
              src="https://design.gemcoder.com/staticResource/echoAiSystemImages/72612d1c9d3214233aeeedd4c9e4255d.png"
              mode="aspectFill"
            ></image>
            <view class="status-indicator"></view>
          </view>
        </view>
      </view>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 奖励概览 -->
      <view class="rewards-overview">
        <view class="overview-card">
          <view class="overview-header">
            <view>
              <text class="overview-title">我的奖励总额</text>
              <text class="overview-subtitle">已累计获得</text>
            </view>
            <view class="exchange-btn" @click="viewExchangeRecords">
              兑换记录
            </view>
          </view>
          <view class="overview-amount">
            <text class="amount-text">¥128.50</text>
            <text class="amount-label">可提现</text>
          </view>
          <view class="overview-stats">
            <view class="stat-item">
              <text class="stat-label">奖励金</text>
              <text class="stat-value">¥95.30</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">优惠券</text>
              <text class="stat-value">5张</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">积分</text>
              <text class="stat-value">2850</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 奖励分类标签 -->
      <view class="filter-tabs">
        <scroll-view scroll-x="true" class="tabs-scroll" show-scrollbar="false">
          <view class="tabs-container">
            <view 
              v-for="(tab, index) in filterTabs" 
              :key="index" 
              class="tab-item" 
              :class="{ active: activeTab === index }"
              @click="switchTab(index)"
            >
              {{ tab.name }}
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 可用奖励 -->
      <view class="available-rewards">
        <view class="section-header">
          <text class="section-title">可用奖励</text>
          <view class="view-all-btn" @click="viewAllRewards">
            查看全部
            <text class="fas fa-angle-right"></text>
          </view>
        </view>

        <!-- 奖励金卡片 -->
        <view class="reward-card">
          <view class="card-header">
            <view>
              <text class="card-title">奖励金</text>
              <text class="card-subtitle">可直接提现到微信钱包</text>
            </view>
            <view class="card-actions">
              <text class="card-amount">¥95.30</text>
              <text class="withdraw-btn" @click="withdraw">提现</text>
            </view>
          </view>
          <view class="card-progress">
            <view class="progress-header">
              <text class="progress-label">本月新增奖励金</text>
              <text class="progress-value">+¥32.80</text>
            </view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: '65%' }"></view>
            </view>
            <text class="progress-tip">距离下一等级还差¥45.20</text>
          </view>
        </view>

        <!-- 优惠券卡片 -->
        <view class="reward-card">
          <view class="card-header">
            <text class="card-title">优惠券</text>
            <text class="view-all-btn" @click="viewAllCoupons">查看全部</text>
          </view>
          <view class="coupons-grid">
            <view class="coupon-item orange" @click="useCoupon(coupons[0])">
              <view class="coupon-decoration"></view>
              <view class="coupon-content">
                <view class="coupon-header">
                  <text class="coupon-condition">满50可用</text>
                  <text class="coupon-expiry">30天内有效</text>
                </view>
                <view class="coupon-amount">
                  <text class="coupon-value">¥10</text>
                  <text class="coupon-type">优惠券</text>
                </view>
                <text class="coupon-description">超市购物可用</text>
              </view>
            </view>
            <view class="coupon-item green" @click="useCoupon(coupons[1])">
              <view class="coupon-decoration"></view>
              <view class="coupon-content">
                <view class="coupon-header">
                  <text class="coupon-condition">无门槛</text>
                  <text class="coupon-expiry">15天内有效</text>
                </view>
                <view class="coupon-amount">
                  <text class="coupon-value">¥5</text>
                  <text class="coupon-type">优惠券</text>
                </view>
                <text class="coupon-description">环保商店通用</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 积分卡片 -->
        <view class="reward-card">
          <view class="card-header">
            <text class="card-title">积分</text>
            <text class="view-all-btn" @click="viewPointsMall">积分商城</text>
          </view>
          <view class="points-content">
            <view class="points-info">
              <view>
                <view class="points-amount">
                  <text class="points-value">2850</text>
                  <text class="points-label">积分</text>
                </view>
                <text class="points-level">等级：环保达人 LV.4</text>
              </view>
              <view class="points-icon">
                <text class="fas fa-medal"></text>
              </view>
            </view>
            <view class="points-progress">
              <view class="progress-header">
                <text class="progress-label">距离下一等级</text>
                <text class="progress-value">1150积分</text>
              </view>
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: '71%' }"></view>
              </view>
              <view class="level-info">
                <text class="current-level">当前：环保达人</text>
                <text class="level-number">LV.4</text>
                <text class="next-level">下一：环保卫士</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 最近奖励记录 -->
      <view class="reward-records">
        <view class="reward-card">
          <view class="card-header">
            <text class="card-title">最近奖励记录</text>
            <text class="view-all-btn" @click="viewAllRecords">全部记录</text>
          </view>
          <view class="records-list">
            <view 
              v-for="(record, index) in rewardRecords" 
              :key="index" 
              class="record-item"
              @click="viewRecordDetail(record)"
            >
              <view class="record-icon" :class="record.typeClass">
                <text class="fas" :class="record.icon"></text>
              </view>
              <view class="record-info">
                <view class="record-header">
                  <text class="record-title">{{ record.title }}</text>
                  <text class="record-amount">{{ record.amount }}</text>
                </view>
                <view class="record-footer">
                  <text class="record-date">{{ record.date }}</text>
                  <view class="record-tag" :class="record.typeTagClass">
                    {{ record.type }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>


    </main>
    
    <!-- 自定义底部导航栏 -->
    <view class="custom-tab-bar">
      <view class="tab-bar-item" @click="switchToHome">
        <image :src="'/static/home.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">主页</text>
      </view>
      <view class="tab-bar-item" @click="switchToRecord">
        <image :src="'/static/record.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">记录</text>
      </view>
      <view class="tab-bar-item" @click="switchToMine">
        <image :src="'/static/mine.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 筛选标签
      filterTabs: [
        { name: '全部奖励', type: 'all' },
        { name: '奖励金', type: 'cash' },
        { name: '优惠券', type: 'coupon' },
        { name: '积分', type: 'points' },
        { name: '实物奖励', type: 'physical' }
      ],
      // 当前激活的标签
      activeTab: 0,
      // 优惠券数据
      coupons: [
        {
          id: 1,
          value: 10,
          condition: '满50可用',
          expiry: '30天内有效',
          description: '超市购物可用',
          type: 'orange'
        },
        {
          id: 2,
          value: 5,
          condition: '无门槛',
          expiry: '15天内有效',
          description: '环保商店通用',
          type: 'green'
        }
      ],
      // 奖励记录数据
      rewardRecords: [
        {
          id: 1,
          title: '环保周活动奖励',
          amount: '+¥15.00',
          date: '2023-06-18 14:30',
          type: '奖励金',
          typeClass: 'green',
          typeTagClass: 'blue',
          icon: 'fa-leaf'
        },
        {
          id: 2,
          title: '连续投放7天奖励',
          amount: '+500积分',
          date: '2023-06-15 09:15',
          type: '积分',
          typeClass: 'purple',
          typeTagClass: 'purple',
          icon: 'fa-gift'
        },
        {
          id: 3,
          title: '邀请好友奖励',
          amount: '+¥10优惠券',
          date: '2023-06-10 16:45',
          type: '优惠券',
          typeClass: 'orange',
          typeTagClass: 'orange',
          icon: 'fa-ticket-alt'
        },
        {
          id: 4,
          title: '塑料瓶回收奖励',
          amount: '+¥2.50',
          date: '2023-06-08 11:20',
          type: '奖励金',
          typeClass: 'blue',
          typeTagClass: 'blue',
          icon: 'fa-recycle'
        }
      ]
    };
  },
  onLoad() {
    // 页面加载时的初始化
    this.initRewardsData();
  },
  methods: {
    // 初始化奖励数据
    initRewardsData() {
      // 在实际项目中，这里会从API获取用户奖励数据
      console.log('初始化奖励数据');
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 查看通知
    viewNotifications() {
      uni.showToast({
        title: '查看通知功能开发中',
        icon: 'none'
      });
    },
    // 查看兑换记录
    viewExchangeRecords() {
      uni.showToast({
        title: '查看兑换记录功能开发中',
        icon: 'none'
      });
    },
    // 切换标签
    switchTab(index) {
      this.activeTab = index;
      // 可以根据选中的标签筛选不同类型的奖励
      console.log('切换到标签：', this.filterTabs[index].name);
    },
    // 查看全部奖励
    viewAllRewards() {
      uni.showToast({
        title: '查看全部奖励功能开发中',
        icon: 'none'
      });
    },
    // 提现功能
    withdraw() {
      uni.showModal({
        title: '提现',
        content: '是否提现¥95.30到微信钱包？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '提现申请已提交',
              icon: 'success'
            });
          }
        }
      });
    },
    // 查看全部优惠券
    viewAllCoupons() {
      uni.showToast({
        title: '查看全部优惠券功能开发中',
        icon: 'none'
      });
    },
    // 使用优惠券
    useCoupon(coupon) {
      uni.showModal({
        title: '使用优惠券',
        content: `是否使用¥${coupon.value}优惠券？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '优惠券已使用',
              icon: 'success'
            });
          }
        }
      });
    },
    // 查看积分商城
    viewPointsMall() {
      uni.showToast({
        title: '积分商城功能开发中',
        icon: 'none'
      });
    },
    // 查看全部记录
    viewAllRecords() {
      uni.showToast({
        title: '查看全部奖励记录功能开发中',
        icon: 'none'
      });
    },
    // 查看记录详情
    viewRecordDetail(record) {
      uni.showModal({
        title: '奖励详情',
        content: `${record.title}\n${record.amount}\n${record.date}`,
        showCancel: false
      });
    },

    
    // 切换到主页
    switchToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    
    // 切换到记录页面
    switchToRecord() {
      uni.switchTab({
        url: '/pages/record/record'
      });
    },
    
    // 切换到我的页面
    switchToMine() {
      uni.switchTab({
        url: '/pages/mine/mine'
      });
    }
  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为底部导航栏留出空间 */
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15rpx;
}

.back-btn .icon {
  font-size: 36rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.header-icon-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 15rpx;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  font-size: 32rpx;
  position: relative;
}

.reward-badge {
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  background-color: #f5222d;
  color: white;
  border-radius: 50%;
  width: 36rpx;
  height: 36rpx;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-container {
  position: relative;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 4rpx solid #1890ff;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20rpx;
  height: 20rpx;
  background-color: #52c41a;
  border-radius: 50%;
  border: 4rpx solid #fff;
}

/* 主内容区域 */
.main-content {
  padding-top: 120rpx;
  padding-bottom: 100rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

/* 奖励概览 */
.rewards-overview {
  margin-bottom: 30rpx;
}

.overview-card {
  background: linear-gradient(to right, #1890ff, #0e66d9);
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.overview-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 8rpx;
}

.overview-subtitle {
  font-size: 24rpx;
  color: #e6f7ff;
}

.exchange-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 15rpx;
  font-size: 24rpx;
}

.overview-amount {
  display: flex;
  align-items: flex-end;
  margin-bottom: 24rpx;
}

.amount-text {
  font-size: 60rpx;
  font-weight: bold;
  color: #fff;
  margin-right: 10rpx;
}

.amount-label {
  font-size: 24rpx;
  color: #e6f7ff;
  margin-bottom: 8rpx;
}

.overview-stats {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 15rpx;
  padding: 20rpx;
  text-align: center;
  margin: 0 8rpx;
}

.stat-item:first-child {
  margin-left: 0;
}

.stat-item:last-child {
  margin-right: 0;
}

.stat-label {
  font-size: 24rpx;
  color: #e6f7ff;
  display: block;
  margin-bottom: 8rpx;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

/* 奖励分类标签 */
.filter-tabs {
  margin-bottom: 30rpx;
}

.tabs-scroll {
  white-space: nowrap;
  scrollbar-width: none; /* Firefox隐藏滚动条 */
  -ms-overflow-style: none; /* IE隐藏滚动条 */
  -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
}

/* Chrome、Safari等webkit浏览器隐藏滚动条 */
.tabs-scroll::-webkit-scrollbar {
  display: none;
}

.tabs-container {
  display: inline-flex;
  gap: 16rpx;
  padding-bottom: 10rpx;
}

.tab-item {
  padding: 16rpx 32rpx;
  border-radius: 40rpx;
  background-color: #fff;
  color: #333;
  font-size: 26rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-item.active {
  background-color: #1890ff;
  color: #fff;
}

/* 可用奖励 */
.available-rewards {
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.view-all-btn {
  font-size: 24rpx;
  color: #1890ff;
  display: flex;
  align-items: center;
}

.view-all-btn text {
  margin-left: 8rpx;
  font-size: 20rpx;
}

/* 奖励卡片通用样式 */
.reward-card {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.card-subtitle {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-top: 8rpx;
}

.card-actions {
  text-align: right;
}

.card-amount {
  font-size: 48rpx;
  font-weight: bold;
  color: #1890ff;
  display: block;
}

.withdraw-btn {
  font-size: 24rpx;
  color: #1890ff;
  margin-top: 8rpx;
  display: block;
}

/* 进度条样式 */
.card-progress {
  margin-top: 20rpx;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.progress-label {
  font-size: 24rpx;
  color: #999;
}

.progress-value {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background-color: #f0f2f5;
  border-radius: 6rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.progress-fill {
  height: 100%;
  background-color: #1890ff;
  border-radius: 6rpx;
}

.progress-tip {
  font-size: 20rpx;
  color: #999;
  text-align: right;
}

/* 优惠券样式 */
.coupons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.coupon-item {
  border-radius: 15rpx;
  padding: 24rpx;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.coupon-item.orange {
  background: linear-gradient(to right, #fa8c16, #ff7d00);
}

.coupon-item.green {
  background: linear-gradient(to right, #52c41a, #00b42a);
}

.coupon-decoration {
  position: absolute;
  right: 0;
  top: 0;
  width: 120rpx;
  height: 120rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 100%;
}

.coupon-content {
  position: relative;
  z-index: 1;
}

.coupon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.coupon-condition {
  font-size: 20rpx;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 6rpx 16rpx;
  border-radius: 15rpx;
}

.coupon-expiry {
  font-size: 20rpx;
}

.coupon-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;
}

.coupon-value {
  font-size: 48rpx;
  font-weight: bold;
  margin-right: 8rpx;
}

.coupon-type {
  font-size: 20rpx;
}

.coupon-description {
  font-size: 20rpx;
  opacity: 0.8;
}

/* 积分样式 */
.points-content {
  margin-top: 20rpx;
}

.points-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.points-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;
}

.points-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-right: 16rpx;
}

.points-label {
  font-size: 24rpx;
  color: #999;
}

.points-level {
  font-size: 24rpx;
  color: #999;
}

.points-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  font-size: 48rpx;
}

.points-progress {
  margin-top: 20rpx;
}

.level-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  margin-top: 12rpx;
  font-size: 20rpx;
}

.current-level {
  color: #999;
}

.level-number {
  color: #333;
  font-weight: 500;
}

.next-level {
  color: #1890ff;
}

/* 奖励记录样式 */
.reward-records {
  margin-bottom: 30rpx;
}

.records-list {
  margin-top: 20rpx;
}

.record-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border-radius: 15rpx;
  background-color: #fafafa;
  margin-bottom: 20rpx;
}

.record-item:last-child {
  margin-bottom: 0;
}

.record-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  font-size: 36rpx;
  flex-shrink: 0;
}

.record-icon.green {
  background-color: #e5f7e9;
  color: #52c41a;
}

.record-icon.purple {
  background-color: #f2e8ff;
  color: #722ed1;
}

.record-icon.orange {
  background-color: #fff7e8;
  color: #fa8c16;
}

.record-icon.blue {
  background-color: #e6f7ff;
  color: #1890ff;
}

.record-info {
  flex: 1;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.record-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.record-amount {
  font-size: 28rpx;
  color: #52c41a;
  font-weight: 500;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-date {
  font-size: 24rpx;
  color: #999;
}

.record-tag {
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
}

.record-tag.blue {
  background-color: #e6f7ff;
  color: #1890ff;
}

.record-tag.purple {
  background-color: #f2e8ff;
  color: #722ed1;
}

.record-tag.orange {
  background-color: #fff7e8;
  color: #fa8c16;
}



/* 自定义底部导航栏样式 */
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180rpx;
  height: 100%;
}

.tab-bar-icon {
  width: 52rpx;
  height: 52rpx;
  margin-bottom: 8rpx;
}

.tab-bar-text {
  font-size: 24rpx;
  color: #8f8f94;
}
</style>